<template>
<div>
    <div  class="control-section"  :style="{height: gadgetHeight + 'px'}">
      <div class="content-wrapper control-styles"
          v-loading="loading" style="width:95%;">
          <ejs-multiselect ref="multiselect"  v-model="value" :dataSource='gadgetSetting.Listdata' :mode='gadgetSetting.Mode' @dataBound="dataBound"
          :popHeight="gadgetSetting.popHeight" :filterPlaceholder="gadgetSetting.filterPlaceholder" :showSelectAll="gadgetSetting.showSelectAll"
          :enableSelectionOrder="gadgetSetting.enableSelectionOrder" :placeholder='gadgetSetting.placeholder'
          :fields="gadgetSetting.fields" :allowFiltering="gadgetSetting.allowFiltering" @filtering="filtering"
          @change="onchange"
          ></ejs-multiselect>
          <br>
      </div>
    <model :showSetting="queryModelDefaultSetting.showSetting" @queryModelClosed="queryModelClosed"
    :dataInfo="queryModelDefaultSetting.dataInfo" :updateGadget="upgradeGadgetSetting"/>
  </div>
  </div>
</template>

<script>

import mixinGadgetViewModule from '@/mixins/gadget-view-module'
import { getUrlQureyParams } from '@/utils/common'
import { defaultGadgetSettingList } from '@/utils/data-json'

export default ({
  mixins: [mixinGadgetViewModule],
  components: { model: () => import('@/components/gadget/query-model/query-model') },
  data: function () {
    return {
      gadgetSetting: {},
      value: null,
      gadgetStatus: 'init',
      loading: false,

      queryModelDefaultSetting: {
        showSetting: false,
        dataInfo: {
          businessId: this.pageId,
          gadgetId: this.id,
          gadgetType: 'customizedmultiselectgadget',
          gadgetSettingExclude: ['DATA'],
          gadgetSetting: this._.find(defaultGadgetSettingList, { gadgetType: 'customizedmultiselectgadget' }).gadgetSetting
          // gadgetSetting: {
          //   placeholder: 'Select',
          //   Mode: 'CheckBox', // 'Box',// 'Delimiter',
          //   popHeight: '350px',
          //   filterPlaceholder: 'Search Users',
          //   showSelectAll: true,
          //   showDropDownIcon: true,
          //   enableSelectionOrder: true,
          //   allowFiltering: true,
          //   fields: { text: 'text', value: 'value' },
          //   height: '220px',
          //   queryParams: 'tenantCode',
          //   Listdata: [
          //     {
          //       text: 'text',
          //       value: 'value'
          //     }
          //   ],
          //   filters: ''
          // }
        }
      }

    }
  },

  computed: {
    tenantSwitch () {
      return this.$store.state.user.tenantSwitch
    }
  },
  watch: {
    tenantSwitch () {
      if (this.$store.state.user.tenantSwitch) {
        localStorage.removeItem(this.pageId + '-customized-multi-select-gadget-' + this.gadgetSetting.queryParams)
      }
    }
  },
  beforeCreate () {
    // this.$options.components.model = () => import('@/components/gadget/query-model/query-model')
  },
  created () {
    this.query()
    this.$store.state.isWidget = false
  },
  methods: {
    queryModelClosed () {
      this.queryModelDefaultSetting.showSetting = false
      this.query()
    },
    showQueryModel () {
      this.queryModelDefaultSetting.showSetting = true
    },
    dataBound (e) {
      this.$refs.multiselect.selectAll(true)
    },
    filtering (e) {
      this.$refs.multiselect.selectAll(false)
    },
    query () {
      this.loading = true
      this._.merge(this.gadgetSetting, this.queryModelDefaultSetting.dataInfo.gadgetSetting)
      var _self = this
      _self.value = null
      var param = {
        code: this.code,
        gadgettype: this.wgadgettype,
        widgetName: this.wName,
        pageId: this.pageId,
        gadgetId: this.id
      }
      this.$interface.reports.getReportDataInfo(param).then(({ data: res }) => {
        // if (res.code !== 0) {
        //   return _self.$message.error(res.msg)
        // }
        _self.gadgetSetting.Listdata = []
        if (res.config) {
          _self.gadgetSetting.Listdata = res.config.Listdata
          _self.gadgetSetting = _self._.merge(_self.gadgetSetting, res.config)
        }
        _self.afterQuery()
        _self.updateGadgetStatus('ready') //! IMPORTANT must have this code in every gadget
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    afterQuery () {
      var valueFromQuery = getUrlQureyParams(this.gadgetSetting.queryParams)
      if (valueFromQuery) {
        this.value = valueFromQuery
      } else {
        // get all value
        if (this.gadgetSetting.filters.length > 0) {
          this.value = this._.map(this.gadgetSetting.Listdata, this.gadgetSetting.fields.value)
          let filtersArr = this.gadgetSetting.filters.split(',')
          this.value = this.value.filter(function (item) {
            if (filtersArr.indexOf(item.text) === -1) {
              return item
            }
          })
        } else {
          this.value = this._.map(this.gadgetSetting.Listdata, this.gadgetSetting.fields.value)
        }
        valueFromQuery = this.value
      }
      this.getDataListParams(valueFromQuery)
    },
    selectedAll (e) {

    },
    onchange (e) {
      if (e.value && e.value.length > 0) {
        this.getDataListParams(e.value)
      }
    },
    getDataListParams (val) {
      var _self = this
      if (val && val.length > 0) {
        var newslicer = {}
        if (_self.slicer[_self.gadgetSetting.queryParams]) {
          delete _self.slicer[_self.gadgetSetting.queryParams]
        }
        newslicer[_self.gadgetSetting.queryParams] = val && val.join()
        _self._.merge(_self.slicer, newslicer)
        localStorage.setItem(this.pageId + '-customized-multi-select-gadget' + _self.gadgetSetting.queryParams, JSON.stringify(val))
      } else {
        delete _self._.merge(_self.slicer, newslicer)
        localStorage.removeItem(this.pageId + '-customized-multi-select-gadget' + _self.gadgetSetting.queryParams)
        return this.$message.error(this.gadgetSetting.watermark)
      }
    }
  }
})
</script>
<style scoped>
.el-card ::v-deep .el-card__body {
  padding: 5px 5px !important;
}
.el-card ::v-deep .el-divider--horizontal {
  margin: 3px 0 !important;
}
.control-styles {
        margin: 0 auto;
        width:300px;
    }

</style>
